<template>
  <a-modal
      :title="title"
      :width="840"
      :visible="visible"
      v-if="visible"
      :confirmLoading="confirmLoading"
      @ok="handleSubmit"
      @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
            label="角色名称"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-input
              autocomplete="off"
              :maxLength="20"
              v-decorator="['name', {rules: [
              {required: true, message: '请输入角色名称'}, {max: 20, message: '角色名称不超过20个字符'}
            ]}]"/>
        </a-form-item>
        <a-form-item
            label="角色描述"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-input
              autocomplete="off"
              :maxLength="200"
              v-decorator="['description', {rules: [
              {required: false, message: '请输入描述'}, {max: 200, message: '不超过200个字符'}
            ]}]"/>
        </a-form-item>

        <a-form-item
            label="请选择资源"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-tree
              v-model="checkedKeys"
              checkable
              :expanded-keys="expandedKeys"
              :auto-expand-parent="autoExpandParent"
              :selected-keys="selectedKeys"
              :tree-data="treeData"
              @expand="onExpand"
              @select="onSelect"
          />
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import {getAuths, saveRole} from '@/services/user'


export default {
  name: 'RoleForm',
  props: {},
  components: {},
  data() {
    return {
      auths: [],
      expandedKeys: [],
      autoExpandParent: true,
      checkedKeys: [],
      selectedKeys: [],
      treeData: [],
      confirmLoading: false,
      labelCol: {
        xs: {span: 24},
        sm: {span: 7}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 13}
      },
      loading: false,
      imageUrl: '',
      imageUrlReactive: '',
      visible: false,

      form: this.$form.createForm(this),
      action: 'add',
      queryParam: {},
      config: {
        info: true,
        fixedNumber: [500, 500],
        fixedBox: false,
        autoCropWidth: 500,
        autoCropHeight: 500
      }
    }
  },
  computed: {
    title() {
      return (this.action === 'add' ? '新建' : '修改') + '客户'
    }
  },
  methods: {
    onExpand(expandedKeys) {
      console.log('onExpand', expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys);
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', info);
      this.selectedKeys = selectedKeys;
    },
    // 新增
    add(e) {
      this.queryParam = {}
      e ? this.queryParam.source = 1 : this.queryParam.source = 0
      this.visible = true
      this.action = 'add'
      this.loading = false
    },
    // 编辑
    edit(record) {
      console.log(record)
      this.visible = true
      this.queryParam = {...record}
      const param = {
        name: this.queryParam.name,
        description: this.queryParam.description
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(param)
      })
      console.log(record)
      this.getAuthsByParam({roleId: record.id})

      this.action = 'edit'
      this.loading = false
    },
    // 提交
    handleSubmit() {
      console.log(this.checkedKeys)
      const {form: {validateFields}} = this
      this.confirmLoading = true
      validateFields((errors, values) => {
        if (!errors) {
          this.queryParam = {...this.queryParam, ...values}//Object.assign({}, )
          this.queryParam.checkedKeys = this.checkedKeys
          console.log(this.queryParam)
          this.addRole(this.queryParam)
        } else {
          this.confirmLoading = false
        }
      })
    },
    addRole(params) {
      console.log(params)
      saveRole(params).then(res => {
        const {
          message
        } = res.data
        this.handleCancel()
        this.$message.success(message)
        this.$emit('ok', res)
      }).catch(() => {
        // eslint-disable-next-line no-unused-vars
      }).finally(res => {
        this.confirmLoading = false
      })
    },
    // 取消
    handleCancel() {
      this.imageUrl = ''
      this.imageUrlReactive = ''
      this.visible = false
      this.confirmLoading = false
    },
    getAuthsByParam(param) {
      console.log(param)
      getAuths(param)
          .then(res => {
            this.treeData = res.data.data.treeData
            this.checkedKeys = res.data.data.checkedKeys
            this.autoExpandParent = res.data.data.autoExpandParent
            this.expandedKeys = res.data.data.expandedKeys
          })
          .catch(() => {
          })
          // eslint-disable-next-line no-unused-vars
          .finally(res => {
          })
    }
  },
  mounted() {
    // getAuths()
    //     .then(res => {
    //       this.treeData = res.data.data.treeData
    //       this.checkedKeys = res.data.data.checkedKeys
    //       this.autoExpandParent = res.data.data.autoExpandParent
    //       this.expandedKeys = res.data.data.expandedKeys
    //     })
    //     .catch(() => {
    //     })
    //     // eslint-disable-next-line no-unused-vars
    //     .finally(res => {
    //     })
  }
}
</script>
<style>
.avatar {
  max-width: 100px;
  max-height: 100px
}

@media (min-width: 576px) {
  .ant-col-sm-7 {
    width: 12.16666667%;
  }
}
</style>
